<template>
  <div class="album">
    <div v-for="item in albumList" :key="item.id" class="albumList">
      <div class="left">
        <img :src="item.picUrl" alt="海报" width="150" height="150" />
        <div>{{formatDate(item.publishTime)}}</div>
      </div>
      <div class="right">
        <div style="marginBottom:8px">
          <span class="albumName">{{item.name}}</span>
          <i class="iconfont iconbofang1" @click="startPlaySong(item.alSongList[0],store)"></i>
        </div>
        <div
          v-for="(item,index) in item.alSongList"
          :key="item.id"
          class="albumSong"
          @dblclick="startPlaySong(item,store)"
          :style="{backgroundColor:index%2?'#252525':'#292929'}"
        >
          <div>{{formatIndex(index+1)}}</div>
          <div>
            {{item.name}}
            <span>{{item.alia[0]}}</span>
          </div>
          <div>{{formatTime(item.dt)}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import axios from '@/http'
import startPlaySong from '@/songPlay.minxin.js'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
onMounted(() => {
  getAlbumList()
})
const store = useStore()
const route = useRoute()
const aloffset = ref(0)
const more = ref(true)
const albumList = ref([])
const alSongList = ref([])
const formatIndex = computed(() => {
  return index => (index < 10 ? '0' + index : index)
})
const formatDate = computed(() => {
  return date => {
    const format = new Date(date)
    const YY = format.getFullYear()
    const MM = format.getMonth()
    const DD = format.getDate()
    return `${YY}-${MM}-${DD}`
  }
})
const formatTime = computed(() => {
  return time => {
    const S = Math.floor(time / 1000)
    const m = Math.floor(S / 60)
    const s = S % 60
    return `${m}:${s}`
  }
})
const getAlbumList = () => {
  const { id } = route.params
  const offset = aloffset.value
  axios
    .get('/artist/album', {
      params: { id, offset }
    })
    .then(res => {
      aloffset.value++
      more.value = res.data.more
      albumList.value = res.data.hotAlbums.map(item => ({ ...item, alSongList: [] }))
      const songListId = albumList.value
      songListId.forEach(item => getAlbumSongList(item))
    })
}
const timer = ref(null)
const freshData = e => {
  const { scrollTop, scrollHeight } = e.target
  if (timer.value) {
    clearTimeout(timer.value)
  }
  timer.value = setTimeout(() => {
    if (scrollTop + 650 > scrollHeight) {
      more.value && addAlbumList()
    }
  }, 200)
}
const addAlbumList = () => {
  const { id } = route.params
  const offset = aloffset.value
  axios
    .get('/artist/album', {
      params: { id, offset }
    })
    .then(res => {
      aloffset.value++
      more.value = res.data.more
      const temList = res.data.hotAlbums.map(item => ({ ...item, alSongList: [] }))
      albumList.value = [...albumList.value, ...temList]
      const songListId = temList
      songListId.forEach(item => getAlbumSongList(item))
    })
}
const getAlbumSongList = item => {
  axios
    .get('/album', {
      params: { id: item.id }
    })
    .then(res => {
      item.alSongList = res.data.songs.map(item => {
        return { ...item, al: item.al.name, picUrl: item.al.picUrl, duration: item.dt, singer: item.ar[0].name }
      })
    })
}
</script>

<style scoped lang="less">
.album {
  margin-bottom: 24px;
  .albumList {
    display: flex;
    margin-bottom: 24px;
    .left {
      margin-right: 64px;
      img {
        border-radius: 5px;
      }
      div {
        color: #b2b2b2;
        font-size: 13px;
        text-align: center;
      }
    }
    .right {
      flex: 1;
      .albumName,
      .iconfont {
        font-size: 18px;
        font-weight: bold;
        color: #969696;
        margin-bottom: 12px;
        &:hover {
          color: #b2b2b2;
          cursor: default;
        }
      }
      .iconfont {
        margin-left: 34px;
        &:hover {
          cursor: pointer;
        }
      }
      .albumSong {
        display: flex;
        padding: 0px 24px;
        &:hover {
          background-color: #313131 !important;
        }
        div {
          height: 35px;
          line-height: 35px;
          font-size: 13px;
          color: #535352;

          &:nth-child(1) {
            flex-basis: 50px;
          }
          &:nth-child(2) {
            flex-basis: 600px;
            color: #b2b2b2;
            span {
              color: #535352;
              margin-left: 8px;
            }
          }
          &:nth-child(3) {
            flex-basis: 100px;
          }
        }
      }
    }
  }
}
</style>